<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简化vue环境的构建</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
    vue实例和初始化容器app绑定的方式  2种
    1. vm.$mount("#app")
    2.创建vue实例时通过配置参数完成容器绑定  el:'#app'
    3. vue实例绑定容器时 选择器不一定都要时id选择器
    4.一个vue实例只能绑定一个容器
-->

<div id="app">
    <h1>hello vue2</h1>
    <div>{{info}}</div>
    <p>学生姓名:{{name}}</p>
    <p>学生年龄:{{age}}</p>
    <p>学生性别:{{sex}}</p>
    <p v-text="name"></p>
</div>

<div class="app">
    <h1>hello vue</h1>
    <div>{{info}}</div>
    <p>学生姓名:{{name}}</p>
    <p>学生年龄:{{age}}</p>
    <p>学生性别:{{sex}}</p>
    <p v-text="name"></p>
</div>

<script>
    const vm = new Vue({
        el:'#app',  // 该属性用于绑定容器
        // 该模板在渲染时 会替换容器中原有的内容
        // template:`
        //    <div>{{info}}</div>
        // `,
        data:{
            info:'hello java2320',
            name:'tom',
            age:20,
            sex:'男'
        }
    })

    // vm.$mount("#app")

</script>
</body>
</html>
